import { Divider, Flex, Tooltip } from 'antd';
import {
  MinusIcon,
  PerspectiveIcon,
  PlusIcon,
  PolymerizationIcon,
  TopographicMapIcon,
  TrafficIcon,
} from '@ycx/ui';
import { createStyles } from 'antd-style';
import { FC, useState } from 'react';
import { LayerType } from '#/enmu.ts';

const useStyle = createStyles(({ css }) => {
  const baseStyle = css`
    border-radius: 8px;
    border: 1px solid var(--ycx-container-border-color);
    background: var(--ycx-container-bg-color);
    box-shadow: 0 8px 12px 0 rgba(119, 130, 153, 0.08);
    backdrop-filter: blur(4px);
    text-align: center;
  `;
  return {
    toolKitWrapper: css`
      ${baseStyle}
      & > .anticon {
        cursor: pointer;

        &:hover {
          color: var(--ycx-primary-color);
        }
      }
    `,
    zoomWrapper: css`
      ${baseStyle};
      color: var(--ycx-font-color-l2);

      & .anticon {
        cursor: pointer;
        width: 22px;

        &:hover {
          color: var(--ycx-primary-color);
        }
      }
    `,
    zoomLevel: css`
      color: var(--ycx-font-color-l2);
      text-align: center;
      //font-family: D-DIN;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px; /* 100% */
      user-select: none;
    `,
  };
});

type Props = {
  editLayer: (type: LayerType, visible: boolean) => void;
  editPitch: (pitch: number) => void;
  zoomLevel: number;
  onChangeZoom: (isZoomIn: boolean) => void;
};

const MapBasicTool: FC<Props> = ({ editLayer, editPitch, zoomLevel, onChangeZoom }) => {
  const { styles } = useStyle();
  const [trafficLayerVisible, setTrafficLayerVisible] = useState(false);
  const [satelliteLayerVisible, setSatelliteLayerVisible] = useState(false);
  const [patchVisible, setPatchVisible] = useState(false);

  const changeTrafficLayer = (visible: boolean) => {
    setTrafficLayerVisible(visible);
    editLayer(LayerType.Traffic, visible);
  };

  const changeSatelliteLayer = (visible: boolean) => {
    setSatelliteLayerVisible(visible);
    editLayer(LayerType.Satellite, visible);
  };

  const changePitch = (visible: boolean) => {
    setPatchVisible(visible);
    editPitch(visible ? 60 : 0);
  };

  return (
    <>
      <Flex
        vertical
        className={`absolute right-8 top-28 z-10 w-10 border border-red-500 p-2 ${styles.toolKitWrapper}`}
        justify="center"
        align="center"
        gap={8}
      >
        <Tooltip title="路况" placement="left">
          <div>
            <TrafficIcon
              onClick={() => changeTrafficLayer(!trafficLayerVisible)}
              style={{
                color: trafficLayerVisible ? 'var(--ycx-primary-color)' : 'inherit',
                fontSize: '24px',
              }}
            />
          </div>
        </Tooltip>
        <Divider style={{ margin: 0 }} />

        <Tooltip title="卫星地图" placement="left">
          <div>
            <TopographicMapIcon
              onClick={() => changeSatelliteLayer(!satelliteLayerVisible)}
              style={{
                color: satelliteLayerVisible ? 'var(--ycx-primary-color)' : 'inherit',
                fontSize: '24px',
              }}
            />
          </div>
        </Tooltip>

        <Divider style={{ margin: 0 }} />

        <Tooltip title="3D" placement="left">
          <div>
            <PerspectiveIcon
              onClick={() => changePitch(!patchVisible)}
              style={{
                color: patchVisible ? 'var(--ycx-primary-color)' : 'inherit',
                fontSize: '24px',
              }}
            />
          </div>
        </Tooltip>
        <Divider style={{ margin: 0 }} />

        <Tooltip title="聚合" placement="left">
          <div>
            <PolymerizationIcon style={{ fontSize: '24px' }} />
          </div>
        </Tooltip>
      </Flex>

      <Flex vertical className="absolute bottom-1/2 right-8" gap={12}>
        <div className={`${styles.zoomWrapper} p-2 ${styles.zoomLevel}`}>{zoomLevel}</div>

        <Flex vertical gap={8} className={`${styles.zoomWrapper} p-2`}>
          <PlusIcon onClick={() => onChangeZoom(true)} style={{ fontSize: '24px' }} />
          <Divider style={{ margin: 0 }} />
          <MinusIcon onClick={() => onChangeZoom(false)} style={{ fontSize: '24px' }} />
        </Flex>
      </Flex>
    </>
  );
};

export default MapBasicTool;
